<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="/css/herder.css">
</head>
<style>
    a {
        text-decoration: none;
        color: #000;
    }

    .el-row {
        margin-bottom: 20px;

    }

    .mainBox {
        margin-top: 13px;
    }

    a:hover {
        color: #FF961E;
    }

    .areaSortBtn {
        cursor: pointer;
    }

    #mapContainer {

    }

    .mapBtn {
        position: relative;
    }

</style>
<body>
<div id="app">

    <el-container>
        <el-header>
            <div class="header">

                <a href="/">
                    <img class="log" src="http://139.224.186.148:10001/imgs/room/banner.png"/>

                </a>
            </div>


        </el-header>
        <el-main>
            <div style="width: 1400px;height:100%;margin: 0 auto;padding-bottom: 100px">

                <el-row style="margin-top: 100px">
                    <el-col :span="10">
                        <el-form ref="form" :model="room" label-width="80px">
                            <el-form-item>
                                <el-input v-model="condition.quarterName"
                                          style="width: 500px" placeholder="请输入小区名,地铁... ">
                                    <el-button slot="append" type="warning" @click="searchRoom()">开始找房</el-button>
                                </el-input>

                            </el-form-item>


                        </el-form>

                    </el-col>

                    <!--                    <el-col :span="10">-->
                    <!--                        <div class="mapBtn">-->
                    <!--                           <a href="/quarters/map"><img  widghth="109px" height="50px" src="https://webimg.ziroom.com/d045cfa0-6faa-4611-82b7-e3ee3aeeee60.png"/></a>-->
                    <!--                            <p style="float: inherit;position: absolute;left: 15px;top: 1px;color: grey;cursor: pointer">地图找房</p>-->
                    <!--                        </div>-->

                    <!--                    </el-col>-->

                </el-row>

                <div>


                    <el-row :gutter="20">
                        <el-col :offset="1" :span="2"><span>类型</span></el-col>

                        <el-radio-group v-model="condition.type" size="mini" fill="#FF961E" @change="initRoom()">
                            <el-radio-button label="">全部</el-radio-button>
                            <el-radio-button label="1">整租</el-radio-button>
                            <el-radio-button label="2">合租</el-radio-button>
                        </el-radio-group>

                        <!--                           <a href="javascript:void(0)" v-on:click="initRoom()" :value="1" v-model="condition.type">整租</a>-->
                        <!--                            <a href="javascript:void(0)"  v-on:click="initRoom()" :value="2" v-model="condition.type">合租</a>-->
                    </el-row>


                    <el-row :gutter="20">
                        <el-col :offset="1" :span="2"><span>区域</span></el-col>
                        <el-col :span="15">
                            <span v-for="a in area "><a href="javascript:void(0)"
                                                        v-on:click="getStreet(a.code)">{{a.name}}</a>&nbsp;&nbsp;&nbsp;</span>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">


                        <el-col v-for="s in streets " :offset="3" :span="3">
                            <input name="checkBox" @change="initRoomByStreet()" type="checkbox" v-bind:value="s.code"
                                   v-model="condition.streetCode"/>
                            <label style="color:  grey;font-size: 10px">{{s.name}}</label>
                        </el-col>

                    </el-row>


                    <el-row :gutter="20">
                        <el-col :offset="1" :span="2"><span>租金</span></el-col>

                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.rent" @change="initRoom()">不限</el-radio>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.rent" label="0-1500" @change="initRoom()">1500元以下
                                </el-radio>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.rent" label="1500-2500" @change="initRoom()">1500-2500元
                                </el-radio>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.rent" label="2500-3500" @change="initRoom()">2500-3500元
                                </el-radio>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.rent" label="3500-4500" @change="initRoom()">3500-4500元
                                </el-radio>
                            </a>
                        </el-col>

                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.rent" label="4500-6000" @change="initRoom()">4500-6000
                                </el-radio>
                            </a>
                        </el-col>

                    </el-row>

                    <el-row :gutter="20">
                        <el-col :offset="1" :span="2"><span>租期时长</span></el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.time" @change="initRoom()">不限</el-radio>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.time" label="1" @change="initRoom()">长租一年</el-radio>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.time" label="2" @change="initRoom()">长租一年以上
                                </el-radio>
                            </a>
                        </el-col>
                        <el-col :span="3">
                            <a class="active">
                                <el-radio v-model="condition.time" label="-1" @change="initRoom()">可短期</el-radio>
                            </a>
                        </el-col>
                    </el-row>
                </div>


                <div style="width: 100%;margin-top: 100px">
                    <div style="height: 50px;width: 100%">
                        <div style="float: right;">


                            <a v-if="condition.isOrderByArea ==  1" href="javascript:void(0)"
                               style="font-size: 17px;color: orange" @click="sortBtn(1)">默认排序</a>
                            <a v-else href="javascript:void(0)" style="font-size: 17px;"
                               @click="sortBtn(1)">默认排序</a>
                            &nbsp; &nbsp; &nbsp; &nbsp;

                            <a href="javascript:void(0)" class="areaSortBtn" style="font-size: 20px;color: orange"
                               v-if="condition.isOrderByArea ==  2" @click="sortBtn(3)">面积<img style="margin-top: 3px"
                                                                                                 height="23px"
                                                                                                 src=""/></a>
                            <a href="javascript:void(0)" class="areaSortBtn" style="font-size: 20px;color: orange"
                               v-if="condition.isOrderByArea == 3" @click="sortBtn(2)">面积<img style="margin-top: 3px"
                                                                                                height="23px"
                                                                                                src=""/></a>
                            <a href="javascript:void(0)" class="areaSortBtn" style="font-size: 20px;"
                               v-if="condition.isOrderByArea == 1" @click="sortBtn(2)">面积<img style="margin-top: 3px"
                                                                                                height="23px"
                                                                                                src=""/></a>


                        </div>

                    </div>

                    <!--            style="width: 100%;height: 500px"-->
                    <el-row class="mainBox">
                        <hr/>
                        <el-col :offset="1" :span="7" v-for="(r,index) in roomList">
                            <el-card :body-style="{ padding: '0px' }" style="margin-top: 30px">
                                <img v-if="r.img" style="width: 500px;height: 260px"
                                     :src="'http://139.224.186.148:10001/imgs/room/roomImgs/'+r.img"
                                     class="image">
                                <img v-else style="width: 500px;height: 260px"
                                     src="http://139.224.186.148:10001/imgs/default.jpg"
                                     class="image">
                                <div style="padding: 14px;">
                                    <span class="RoomTitle"><a :href="'/room/toRoomDetail/'+r.id"
                                                               style="font-size: 20px"><span
                                            v-if="r.type==1">整租</span><span
                                            v-else>合租</span>·{{r.name}}·{{r.roomType}}-{{r.direction}}</a></span>

                                    <div style="width: 100%;height: 50px;padding-top: 20px">
                                        {{r.area}}m²|{{r.build}}层
                                        <span style="position: relative;left: 70px;"><span
                                                style="color: #FF9B2A;font-size: 27px">¥{{r.rent}}/月</span></span>
                                    </div>
                                    <div v-if="r.position" style="color: grey">
                                        {{r.position}}
                                    </div>
                                    <div v-else style="color: grey">
                                        暂无地址
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>


                    <div style="align-content: center">
                        <el-pagination
                                class="pageList"
                                layout="total,prev, pager,next,jumper"
                                :total="total"
                                :page-size="pageSize"
                                :current-page.sync="pageNum"
                                @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>


                </div>


            </div>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>


</div>
<script>
    let vupApp = new Vue({
        el: "#app",
        data: {
            pageSize: 9,
            pageNum: 1,
            total: 0,
            checkList: [],
            condition: {
                isOrderByArea: 1,
                type: '',
                streetCode: [],
                rent: '',
                time: '',
                isOrderByPrice: '',

                quarterName: ''
            },
            area: [],
            room: {},
            streets: [],
            roomList: []
        },
        methods: {
            toRegister() {
                location.href = '/ziroom_portal/user/register'
            },
            toLogin() {
                location.href = '/ziroom_portal/user/login'
            },
            sortBtn(s) {
                this.condition.isOrderByArea = s
                this.initRoom()

            },
            handleCurrentChange(num) {
                console.log(num)
                this.pageNum = num;
                // alert(this.pageNum)
                this.initRoom();

            },
            initRoomByStreet() {
                this.condition.quarterName = ''
                this.initRoom()
            },
            searchRoom() {
                this.condition.streetCode = []
                this.initRoom()
            },
            initArea() {
                let url = '/areas/getAreas'
                axios.get(url).then((res) => {
                    this.area = res.data;
                })
            },
            getStreet(code, obj) {

                let url = "/streets/getStreetsByArea?code=" + code
                axios.get(url).then((res) => {
                    this.streets = res.data;
                })
            },
            initRoom() {

                let info = this.condition
                let url = "/room/roomList?num=" + this.pageNum + "&size=" + this.pageSize
                axios.post(url, this.condition).then((res) => {

                    this.roomList = res.data.records;
                    this.pageNum = res.data.current;
                    this.pageSize = res.data.size
                    this.total = res.data.total;
                })
            }
        },
        created() {
            this.initArea()
            this.initRoom()
        }
    })
</script>

</body>
</html>